{% extends 'cms/base/cms_base.html' %}
{% load time_filters %}

{% block title %}
    Post Management
{% endblock %}

{% block content %}
<section class="content">
  <div class="container-fluid pt-4">
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-body">
            <div class="row p-2 d-flex">
              <p class="h3">文章列表</p>
              <div class="ml-auto">
                <a
                  class="btn btn-primary text-right"
                  href="{% url 'cms:post_publish_view' %}"
                  ><i class="mr-2 fas fa-plus"></i>新增</a
                >
              </div>
            </div>
            <div class="row">
              <table class="table table-bordered table-hover">
                <thead class="thead-light">
                  <tr>
                    <th style="width: 10%;">#</th>
                    <th>Title</th>
                    <th style="width: 10%;">Category</th>
                    <th style="width: 10%;">Priority</th>
                    <th style="width: 10%;">Status</th>
                    <th style="width: 10%;">Publish_Time</th>
                    <th style="width: 15%;">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in list_data %}
                  <tr>
                    <td>{{ item.id }}</td>
                    <td>
                      <a
                        href="{% url 'cms:post_edit_view' %}?post_id={{ item.id }}"
                        class=""
                        >{{ item.title }}</a
                      >
                    </td>
                    <td>{{ item.category.name }}</td>
                    <td>{{ item.priority }}</td>
                    <td>
                      {% for list_item in list_data_status %} {% if item.status == list_item.0 %} {{ list_item.1 }} {% endif %} {% endfor %}
                    </td>
                    <td>{{ item.publish_time | data_format_y_m_d}}</td>
                    <td>
                      <a
                        href="{% url 'cms:post_edit_view' %}?post_id={{ item.id }}"
                        class="btn btn-primary btn-xs"
                        >修改</a
                      >
                      <a
                            href="{% url 'post:detail' time_id=item.time_id %}"
                            target="_blank"
                            class="btn btn-warning btn-xs"
                            >预览</a
                          > 
                      <a
                        href="{% url 'cms:post_delete' %}?post_id={{ item.id }}"
                        class="btn btn-danger btn-xs"
                        >删除</a
                      >
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            <div class="row">
              <div class="col-sm-5">
                <p class="pull-left">第{{ current_page }}页/总共{{ num_pages }}页</p>
              </div>
              <div class="col-sm-7">
                <div class="dataTables_paginate paging_simple_numbers float-right">
                  <ul class="pagination">
                    {#上一页#} {% if page_obj.has_previous %}
                    <li class="paginate_button page-item ">
                      <a
                        class="page-link"
                        href="?p={{ page_obj.previous_page_number }}{{ url_query }}"
                        >上一页</a
                      >
                    </li>
                    {% else %}
                    <li class="paginate_button page-item previous disabled">
                      <a class="page-link" href="javascript:void(0);">上一页</a>
                    </li>
                    {% endif %} {# 是否需要出现三个点 #} {% if left_has_more %}
                    <li class="paginate_button page-item ">
                      <a class="page-link" href="?p=1">1</a>
                    </li>
                    <li class="paginate_button page-item ">
                      <a class="page-link" href="javascript:void(0);">...</a>
                    </li>
                    {% endif %} {# 左边的页码 #} {% for left_page in left_pages %}
                    <li class="paginate_button page-item ">
                      <a class="page-link" href="?p={{ left_page }}{{ url_query }}"
                        >{{ left_page }}</a
                      >
                    </li>
                    {% endfor %} {# 当前的页面 #}
                    <li class="paginate_button page-item  active">
                      <a class="page-link" href="?p={{ current_page }}{{ url_query }}"
                        >{{ current_page }}</a
                      >
                    </li>
            
                    {# 右边的页码 #} {% for right_page in right_pages %}
                    <li class="paginate_button page-item ">
                      <a class="page-link" href="?p={{ right_page }}{{ url_query }}"
                        >{{ right_page }}</a
                      >
                    </li>
                    {% endfor %} {# 用来控制右边三个点 #} {% if right_has_more %}
                    <li class="paginate_button page-item ">
                      <a class="page-link" href="javascript:void(0);">...</a>
                    </li>
                    <li class="paginate_button page-item ">
                      <a
                        class="page-link"
                        href="?p={{ num_pages }}{{ url_query }}"
                        >{{ num_pages }}</a
                      >
                    </li>
                    {% endif %} {#下一页#} {% if page_obj.has_next %}
                    <li class="paginate_button page-item next">
                      <a
                        class="page-link"
                        href="?p={{ page_obj.next_page_number }}{{ url_query }}"
                        >下一页</a
                      >
                    </li>
                    {% else %}
                    <li class="paginate_button page-item next disabled">
                      <a class="page-link" href="javascript:void(0);">下一页</a>
                    </li>
                    {% endif %}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}